<!DOCTYPE html>
<html>
<head>
<title>自定义表管理</title>
#include("../include/common.html")
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>自定义表管理</h5>
            </div>
            #if(models?? && models.size()>0)
            <div class="zTreeDemoBackground left" style="float: left;padding: 13px;height: 100%">
                <ul id="dataTree" class="ztree" style="height: 100%"></ul>
            </div>
            <div class="right" style="position: inherit;margin: 0 0 0 250px;padding: 0;">
              <iframe id="dataFrame" name="dataFrame" frameborder="0" scrolling="AUTO" width="100%" height="1200px;" src="../table/data?modelId=#(models.get(0).id)"></iframe>
            </div>
            #else
            <div class="middle-box text-center animated fadeInDown">
		        <h3 class="font-bold">暂无数据</h3>
		    </div>
            #end
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
var dataFrame;
var setting = {
  view: {
    dblClickExpand: false,
    showLine: true,
    selectedMulti: false
  },
  data: {
    simpleData: {
      enable: true,
      idKey: "id",
      pIdKey: "pId",
      rootPId: ""
    }
  },
  callback: {
    beforeClick: function (treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("dataTree");
      dataFrame.attr("src", treeNode.file);
      return true;
    }
  }
};

var nodes = [
    #for(model : models)
        {id:#(model.id),open:true,file: "../table/data?modelId=#(model.id)",pId:0, name: "#(model.name)"}#if(!for.last),#end
    #end    
];

$(document).ready(function(){
    var treeObj = $.fn.zTree.init($("#dataTree"), setting, nodes);
    var treeNodes = treeObj.getNodes();
    if (treeNodes.length > 0) {
        treeObj.selectNode(treeNodes[0]);//默认选中根节点
    }
    dataFrame = $("#dataFrame");
});
</script>